<template>
  <div>
    <el-table id="my-table" v-loading="loading" :data="list" >
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="订单号" align="center" prop="orderNum" width="200"/>
      <el-table-column label="下单时间" align="center" prop="createTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆天单价" align="center" prop="money" width="90">
        <template slot-scope="scope">
          <span>￥{{ scope.row.money }}/天</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆租金" align="center" prop="totalMoney" width="80">
        <template slot-scope="scope">
          <span>￥{{ scope.row.totalMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="违章押金" align="center" prop="depositMoney" width="80">
        <template slot-scope="scope">
          <span>￥{{ scope.row.depositMoney }}</span>
        </template>
      </el-table-column>

      <el-table-column label="服务类型" align="center" prop="orderType" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_servicetype" :value="scope.row.orderType"/>
        </template>
      </el-table-column>
      <el-table-column label="门店名称" align="center" prop="shopName" width="110"/>
      <el-table-column label="车牌号" align="center" prop="carNum" width="90"/>
      <el-table-column label="车辆名称" align="center" prop="carname" width="80"/>
      <el-table-column label="取车时间" align="center" prop="startTime" width="100"/>
      <el-table-column label="还车时间" align="center" prop="endTime" width="100"/>
      <el-table-column label="总天数" align="center" prop="day" width="60"/>
      <el-table-column label="当前接单人ID" align="center" prop="uid" width="120"/>
      <el-table-column label="支付金额" align="center" prop="prepayMoney"/>
      <el-table-column label="取车姓名" align="center" prop="username" width="75"/>
      <el-table-column label="取车电话" align="center" prop="tel" width="110"/>
      <el-table-column label="支付方式" align="center" prop="payType" width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.vehicle_order_paytype" :value="scope.row.payType"/>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="status" width="75">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.vhiceodr_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center"
                       class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="mini"
            @click="viewOrderDetail(scope.row)"
          >详情
          </el-button>
          <el-button
            type="text"
            icon="el-icon-s-finance"
            size="mini"
            @click="updatePrepayMoney(scope.row)"
            v-hasPermi="['merchant:vhiceodr:edit']"
          >修改金额
          </el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="assignOrder" icon="el-icon-thumb"
                                v-hasPermi="['merchant:vhiceodr:edit']">订单指派
              </el-dropdown-item>
              <el-dropdown-item command="cancelOrder" icon="el-icon-document-remove"
                                v-if="scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 6"
                                v-hasPermi="['merchant:vhiceodr:edit']">取消订单
              </el-dropdown-item>
              <el-dropdown-item command="handleDelete" icon="el-icon-delete"
                                v-if="scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 6"
                                v-hasPermi="['merchant:vhiceodr:remove']">删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <add-vehicle ref="addVehicle" />
    <update-order ref="updateOrder" @update="" :dict="dict"></update-order>
  </div>
</template>
<script>

import {getVhiceodr, updateOrderMoney} from "@/api/merchant/order";
import updateOrder from "@/views/order/computed/updateOrder.vue";
import addVehicle from "@/views/order/computed/detailOrder.vue";

export default {
  props: ['total', 'loading', 'list'],
  setup(props, { emit }) {
    const state = reactive({
      localList: [...props.list] // 创建 list 的副本
    });

    const updateList = (newList) => {
      state.localList = newList; // 更新副本
      emit('update:list', newList); // 触发更新事件
    };

    // 监听 props.list 的变化
    watch(() => props.list, (newList) => {
      state.localList = [...newList]; // 同步更新 localList
    });

    return { localList: state.localList, loading: props.loading, updateList };
  },
  name: "stores",
  components: {
    updateOrder, addVehicle
  },
  dicts: ['order_isuse', 'order_membertype', 'order_ispay', 'order_istui', 'wehicle_iszx', 'order_open_zx_service', 'order_active', 'order_ispl', 'order_gettype','vehicle_source',
    'order_display', 'order_type', 'vehicle_order_status', 'vehicle_order_paytype', 'order_is_return_vehdeposit', 'order_is_return_viodeposit', 'order_source', 'order_categorize', 'order_servicetype', 'vehicle_order_paytype', 'vhiceodr_status'],
  data:{
    detailForm: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      userName: undefined,
      phonenumber: undefined,
      status: undefined,
      deptId: undefined
    },
    queryParamsOrder: {
      pageNum: 1,
      pageSize: 5,
    },
    total:0,
    // 弹出层标题
    title: "",
    detailOpen: false,
    page:{
      pageNum:0,
      pageSize:10
    },
    localList: [] // 将props的list值复制到本地变量localList
  },
  computed: {
    formatMoneyValue() {
      return '￥' + this.detailForm.money + '/天';
    },
    formatTotalMoneyValue() {
      return '￥' + this.detailForm.totalMoney;
    },
    formatVehComAmountValue() {
      if (this.detailForm.vehComAmount != null) {
        return '￥' + this.detailForm.vehComAmount;
      } else {
        return '';
      }
    },
    formatPrepayMoneyValue() {
      return '￥' + this.detailForm.prepayMoney;
    },
    formatRefundMoneyValue() {
      if (this.detailForm.refundMoney != null) {
        return '￥' + this.detailForm.refundMoney;
      } else {
        return '';
      }
    },
    formatDepositMoneyValue() {
      return '￥' + this.detailForm.depositMoney;
    },
    formatViolationDepositValue() {
      if (this.detailForm.voainDeposit != null) {
        return '￥' + this.detailForm.voainDeposit;
      } else {
        return '';
      }
    },
    formatDeliveryValue() {
      if (this.detailForm.snatchPersonName != null) {
        return this.detailForm.snatchPersonName;
      } else {
        return this.detailForm.deliveryName;
      }
    }
  },
  methods: {
    /** 查看订单详情 */
    viewOrderDetail(row) {
      const orderNum = row.orderNum || this.orderNum
      /** 修改按钮操作 */
      getVhiceodr(orderNum).then(response => {
          if (response.code == 200) {
            this.$refs.addVehicle.open(response.data)
          }
        })
    },
    /** 修改支付金额 */
    updatePrepayMoney(row) {
      const orderNum = row.orderNum || this.orderNum
      const id = row.id
      if (orderNum) {
          this.$prompt('请输入金额', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            inputPattern: /^\d+(\.\d+)?$/,
            inputErrorMessage: "金额必须为数值",
            inputValidator: (value) => {
              if (/<|>|"|'|\||\\/.test(value)) {
                return "不能包含非法字符：< > \" ' \\\ |"
              }
            },
          }).then(({value}) => {
            updateOrderMoney(id, orderNum, value).then(response => {
              this.$emit('parentgetOrderList');
            });
          }).catch(() => {
          });
      }
    },
    assignOrder(row) {
      this.$router.push({
        path: '/order/assignOrder',
        query: {
          orderNum: row.orderNum,
          orderId: row.id
        }
      })
    },
    handleCommand(command, row) {
      switch (command) {
        case "updateOrderStatus":
          this.updateOrderStatus(row);
          break;
        case "cancelOrder":
          this.cancelOrder(row);
          break;
        case "handleDelete":
          this.handleDelete(row)
          break
        case "handleReturnVehicle":
          this.handleReturnVehicle(row)
          break
        case "handleCompleteOrder":
          this.handleCompleteOrder(row)
          break
        case "assignOrder":
          this.assignOrder(row)
        default:
          break;
      }
    },
    // 取消查看订单详情按钮
    cancelViewOrder() {
      this.detailOpen = false;
    },
  }
}
</script>
<style scoped lang="scss">
</style>
